<template>
  <div class="order bcwh f16r">
    <div class="header">
      <zh-header :leftRouter="{name: 'user'}" title="订单列表">
        <span slot="left">返回</span>
      </zh-header>
      <div class="nav bb1">
        <a class="item tc lh40r vertical" @click="active = 'order-1'">全部</a>
        <a class="item tc lh40r vertical" @click="active = 'order-2'">进行中</a>
        <a class="item tc lh40r vertical" @click="active = 'order-3'">已完成</a>
        <a class="item tc lh40r vertical" @click="active = 'order-4'">已取消</a>
      </div>
    </div>

    <div class="container">
      <mt-tab-container v-model="active">
        <mt-tab-container-item id="order-1">
          <ul class="list">
            hello
          </ul>
        </mt-tab-container-item>
        <mt-tab-container-item id="order-2">
          <ul class="list">
            <li class="item bb1" v-for="(house, index) in houses" :key="index">
              <div class="top bb1">
                <img class="preview" :src="house.preview">
                <div class="info">
                  <div class="header ovh">
                    <div class="title left">{{house.title}}</div>
                    <div class="province right">{{house.province}}</div>
                  </div>
                  <div class="price ovh">
                    <div class="text left">价格</div>
                    <div class="value right">{{house.price}}</div>
                  </div>
                </div>
              </div>
              <div class="time ovh">
                <div class="text left">完成时间</div>
                <div class="value right">{{house.time}}</div>
              </div>
            </li>
          </ul>
        </mt-tab-container-item>
        <mt-tab-container-item id="order-3">
          <ul class="list">
          </ul>
        </mt-tab-container-item>
        <mt-tab-container-item id="order-4">
          <ul class="list">
          </ul>
        </mt-tab-container-item>
      </mt-tab-container>
    </div>
  </div>
</template>

<script>
import zhHeader from '@/components/Header'
export default {
  components: {
    zhHeader
  },
  data() {
    return {
      active: 'order-2',

      houses: [{
        'title': '内蒙古海景房',
        'preview': 'https://cbu01.alicdn.com/img/ibank/2018/265/447/8492744562_722461326.220x220.jpg',
        'province': '内蒙古',
        'price': 20000,
        'time': '2018年04月01日'
      }]
    }
  }
}
</script>

<style lang="stylus">
.order
  height: 100%
  .nav
    display: flex
    position: relative
    .item
      flex: 1
      position: relative
      &:not(:last-child)::before
        display: inline-block
        position: absolute
        content: ''
        width: 1px
        height: 100%
        right: 0
        border-right: 1px solid #eee
  .list .item 
    padding: 10px
    .top
      display: flex
      padding-bottom: 10px
    .preview
      width: 2rem
      height: 2rem
      margin-right: 10px
    .info
      flex: 1
    .time
      padding-top: 10px
</style>
